import { createRouter, createWebHistory } from 'vue-router'
import MainView from '../views/Main.vue'
import HomeView from '../views/HomeView.vue'

const routes = [
    {
        path: '/',
        name: 'main',
        component: MainView,
        children: [
            {
                path: '',
                name: 'home',
                component: HomeView
            },
            {
                path: 'about',
                name: 'about',
                component: () =>
                    import(/* webpackChunkName: "about" */ '../views/Book.vue')
            },
            {
                path: 'help',
                name: 'help',
                component: () =>
                    import(/* webpackChunkName: "help" */ '../views/Help.vue')
            },
            {
                path: 'book',
                name: 'book',
                component: () =>
                    import(/* webpackChunkName: "book" */ '../views/Book.vue')
            },
            {
                path: 'search',
                name: 'search',
                component: () =>
                    import(
                        /* webpackChunkName: "search" */ '../views/Search.vue'
                    )
            },
            {
                path: 'detail/:id',
                name: 'detail',
                component: () =>
                    import(
                        /* webpackChunkName: "detail" */ '../views/Detail.vue'
                    )
            },
            {
                path: 'playGame',
                name: 'PlayGame',
                component: () =>
                    import(
                        /* webpackChunkName: "PlayGame" */ '../views/PlayGame.vue'
                    )
            },
            {
                path: 'agreement',
                name: 'Agreement',
                component: () =>
                    import(
                        /* webpackChunkName: "Agreement" */ '../views/Agreement.vue'
                    )
            }
        ]
    },
    {
        path: '/login',
        name: 'login',
        component: () => {
            return import(/* webpackChunkName: "login" */ '../views/Login.vue')
        }
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router
